<div class="bg-white">
	<header class="mui-bar mui-bar-nav head-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back(-1);"></a>
		<h1 class="mui-title">注册</h1>
	</header>


	<div class="mui-content bg-white">
		<br />
		<br />
		<div class="mui-content-padded login-form-box reg-form-box">
			<div class="mui-input-row">
				<input type="text" name="name" class="mui-input-clear j-name" placeholder="您的名字" />
			</div>
			<div class="mui-input-row">
				<input type="text" class="mui-input-clear j-mobile" placeholder="您的手机号码" name="mobile" />
			</div>
			<div class="mui-input-row mui-password">
				<input type="password" class="mui-input-password j-pwd " placeholder="6-12位数字或字母" name="pwd">
			</div>
			<div class="mui-input-row">
				<div class="login-code-text">
					<input type="text" class="mui-input-clear j-mocode" placeholder="短信验证码" data-input-clear="2"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<button id="getCode"  onclick="getCode()" class="mui-btn login-code-btn">获取验证码</button>
			</div>
		</div>
		<br /><br />

		<!---->
		<button class="mui-btn mui-btn-block mui-btn-green res-btn">登录</button>

		<br />

	</div>
</div>


<style>


    .dis {
        cursor: no-drop !important;
    }
</style>
<!-- JS -->
@section Scripts{

<script>
	layui.use(['form', 'layer', 'upload'], function() {
		layer = layui.layer;

		//获取验证码
		$(".login-code-btn").click(function() {
			if ($(".j-mobile").val().length != 11) {
				layerm.open({
				content: '请输入正确的手机号'
				 ,btn: '确定'
				});
				return false;
			}

			$.ajax({
				type: "post",
				url: "@Url.Action("MobileCode","Login")",
				data: {
					mobile:$(".j-mobile").val()
				},
				success: function(result) {
					if (result.state == "ok") {
						layerm.open({
						content: "已发送"
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
						});
					} else {
						layerm.open({
						content:result.msg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
						});
					}
				}
			})
		});


		//提交
		$(".mui-btn-green").click(function() {
			if ($(".j-name").val().length == 0) {
				layerm.open({
				content: '请输入有效的用户名'
				,btn: '确定'
				});
				return false;
			}

			if ($(".j-pwd").val().length < 6 || $(".j-pwd").val().length > 12) {
				layerm.open({
				content: '请输入大于6-12位的密码'
				,btn: '确定'
				});
				return false;
			}

			if ($(".j-mobile").val().length != 11) {
				layerm.open({
				content: '请输入正确的手机号'
				,btn: '确定'
				});
				return false;
			}

			if ($(".j-mocode").val().length != 6) {
				layerm.open({
				content: '请输入正确的手机验证码'
				,btn: '确定'
				});
				return false;
			}


			$.ajax({
				type:"post",
				url:"@Url.Action("Register")",
				data:{name:$(".j-name").val(),pwd:$(".j-pwd").val(),mobile:$(".j-mobile").val(),code:$(".j-mocode").val()},
				success:function(result){
					if(result.state="ok"){
						location.href="@Url.Action("Index")";
					}else{
						layerm.open({
						content: result.msg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
						});
					}
				}
			})

		})




    })


    var but = document.getElementById('getCode');
    var time = 60;
    function getCode() {
        alert('发送成功');
        but.className = 'dis';
        but.setAttribute('disabled', 'disabled')
        var myTime = setInterval(function () {
            if (time == 0) {
                clearInterval(myTime);
                but.removeAttribute('disabled')
                but.innerHTML = '获取验证码';
                but.classList.remove("dis");
                time = 60;
            } else {
                but.innerHTML = time + 's后再次发送';
                time--;
            }
        }, 1000)
    }












</script>

}
